<template>
	<div>
		<el-card class="other-card m-t10" shadow="never">
			<div class="d-flex">
				<div class="title">
					 <span>*</span>
					相关附件
				</div>
				<div>
					<FileMinioUpload
							:restriction="true"
							:restrictionLimit="9"
							:business-type="businessType"
							:association-id="businessId"
							v-model:files="files"
							@updateFiles="updateFiles"
							v-if="pageType !== 'view'"
					/>
				</div>
			</div>
			<div class="card_content m-r20">
				<div
					class="file-content-item d-flex a-center m-t20 m-r30"
					v-for="(v, i) in files"
					:key="i"
				>
					<span
						>{{ i + 1 }}. {{ v.fileName }} --
						{{ v.fileType == 2 ? "文件" : "图片" }}</span
					>
					<div
						class="button-download d-flex a-center j-center m-l10"
						@click="handleDown(v)"
					>
						<svg-icon icon-class="project-download" class="icon" />
						<span>下载</span>
					</div>
					<svg-icon
						v-if="pageType !== 'view'"
						icon-class="project-detail-icon-l-delete"
						class="delete-icon m-l5"
						@click="handleRemove(v)"
					/>
				</div>
				<el-empty class="m-t20" v-if="!files.length" description="暂无数据"></el-empty>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ElUpload, ElLoading, ElMessage,ElEmpty } from "element-plus";
import { fileControlApi } from "@/api/assets";
import { fileCallback } from "@/api/common";
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import {ref, watch} from "vue";

const props = defineProps({
	pageType: {
		type: String,
	},
	tenderTaskId: {
		type: String,
	},
	businessType: {
		type: Number,
	},
	businessId: {
		type: String,
	},
	fileList:{
		type:Array,
		default:[]
	}
});

const emits = defineEmits(['onSuccess']);

const files = ref([]);
const updateFiles = () => {
  emits('onSuccess',files);
}

watch(()=>props.fileList,(value)=>{
	if(value.length){
		files.value = value;
	}
});

const handleRemove = (item) => {
	// fileDelete
	fileControlApi.fileDelete(item.fileName, item.fileUrlKey).then((res) => {
		const { code, data, msg } = res;
		if (code != "200") {
			ElMessage({
				type: "error",
				message: msg,
			});
		} else {
			props.files.splice(
				props.files.findIndex((v) => item.fileUrlKey == v.fileUrlKey),
				1
			);
			ElMessage.success("删除成功");
		}
	});
};

const handleDown = (item) => {
	fileCallback(item);
};
</script>
<style lang="scss" scoped>
.title {
	span {
		color: #f12527;
	}
	height: 16px;
	font-size: 16px;
	font-weight: bold;
	color: #1a1a1a;
	line-height: 40px;
}
.el-button {
	border: 1px solid #fc7018;
	border-radius: 20px;
	color: #fc7018;
	width: 114px;
	height: 40px;
}

.card_content {
	display: flex;
	flex-wrap: wrap;
	padding: 0 69px;
	.file-content-item {
		.button-download {
			width: 77px;
			height: 32px;
			background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
			border-radius: 4px;
			cursor: pointer;

			.icon {
				width: 18px;
				height: 18px;
			}
			span {
				color: #ffffff;
			}
		}
		.delete-icon {
			width: 20px;
			height: 20px;
			cursor: pointer;
		}
	}
}
</style>
